<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import CustomerTable from '@/components/Customer/CustomerTable.vue'
import SetCustomer from '@/components/Customer/CustomerOptionDialog.vue'
import { Customer } from '@/api/customer'

const customerTableRef = ref()
const pauseRecording = ref<string[]>()
const showSuspendRecordDialog = ref(false)
const suspendDeliveryButton = (index: number, customer: Customer) => {
  showSuspendRecordDialog.value = true
  const pauseRecordingArr = JSON.parse(customer.pause_recording) ?? []
  pauseRecording.value = pauseRecordingArr
}

// 修改客户
const setCustomerValue = reactive({
  showAddDialog: false,
  customer: {}
})
const setCustomerMessage = async (index: number, customer: Customer) => {
  setCustomerValue.customer = customer
  await nextTick()
  setCustomerValue.showAddDialog = true
}

const setSuccess = async () => {
  await customerTableRef.value.getTableData()
  setCustomerValue.showAddDialog = false
}
</script>

<template>
<CustomerTable isAllowAddCustomer ref="customerTableRef">
  <template #option="{ scope }">
    <el-button type="text" size="small" @click="setCustomerMessage(scope.$index, scope.row)">修改</el-button>
    <el-button type="text" size="small" @click="suspendDeliveryButton(scope.$index, scope.row)">停送记录</el-button>
  </template>
</CustomerTable>
<el-dialog v-model="showSuspendRecordDialog"  width="50%" title="停送记录">
  <div>
    <el-table :data="pauseRecording" stripe size="small" style="width: 100%">
      <el-table-column prop="stopTime" label="停送开始时间" width="100" />
      <el-table-column prop="endStopTime" label="停送结束时间" width="100" />
      <el-table-column prop="suspendedDay" label="暂停天数" width="80" />
      <el-table-column prop="optionTime" label="操作时间" width="100" />
      <el-table-column prop="optionUser" label="操作人员" width="80" />
      <el-table-column prop="reason" label="暂停原因" />
    </el-table>
  </div>
  <template #footer>
    <span class="dialog-footer">
      <el-button type="primary" @click="showSuspendRecordDialog = false">确认</el-button>
    </span>
  </template>
</el-dialog>
<SetCustomer
  :showAddDialog="setCustomerValue.showAddDialog"
  dialogType="set"
  :defaultRuleForm="(setCustomerValue.customer as Customer)"
  @closeDialog="setCustomerValue.showAddDialog = false"
  @optionSuccess="setSuccess"
/>
</template>

<style lang="scss" scoped>

</style>
